<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="__PUBLIC_ADMIN__/Css/public.css">
    <link rel="stylesheet" href="__PUBLIC_ADMIN__/Css/node.css">
    <script src="__PUBLIC__/Js/jquery-1.7.2.min.js"></script>
    <script src="__PUBLIC__/layer/layer.js"></script>

    <style>
        .add-role{
            display: inline-block;
            width: 100px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            border: 1px solid blue;
            border-radius: 4px;
            margin-left: 20px;
            cursor: pointer;
        }
    </style>

    <script>
        $(function(){
            $('.add-role').click(function(){
                var obj=$(this).parents('tr').clone();

                obj.find('.add-role').remove();

                $('#last').before(obj);
            })
        })
    </script>
</head>
<body>
<form action="" method="post">
    <table class="table">
        <tr>
            <th colspan="2">添加用户</th>
        </tr>
        <tr>
            <td align="right">用户账号:</td>
            <td>
                <input type="text" name="username">
            </td>
        </tr>
        <tr>
            <td align="right">密码:</td>
            <td>
                <input type="password" name="password">
            </td>
        </tr>
        <tr>
            <td align="right">所属角色:</td>
            <td>
                <select name="role_id[]" id="">
                    <option value="">请选择角色</option>
                    <foreach name="role" item="vo">
                        <option value="{$vo['id']}">{$vo['name']}({$vo['remark']})</option>
                    </foreach>
                </select>
                <span class="add-role">添加一个角色</span>
            </td>
        </tr>
        <tr id="last">
            <td colspan="2" align="center">
                <input type="submit" value="保存添加">
            </td>
        </tr>
    </table>
</form>
</body>
</html>